<template>
  <div class="echarts-outer-wrapper width-1250">
    <Title title="北京市内发票情况(各区)"></Title>
    <div class="content-top">
      <div class="echart-tab-wrapper">
        <div class="tabs">
          <div
            class="tab-item"
            v-for="(item, index) in tabList"
            :key="item.id"
            :class="{ select: selectedIndex === index }"
            @click="changeTab(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="echart-content-wrapper">
        <div class="echart-content-box">
          <div class="item">
            <p>
              <span class="value">346.31</span><span class="unit">亿元</span>
            </p>
            <p>开具金额</p>
          </div>
          <div class="item">
            <p>
              <span class="value">346.31</span><span class="unit">亿元</span>
            </p>
            <p>同期金额</p>
          </div>
        </div>
        <MapBox
          class="echart"
          v-model="chartID"
          v-if="chartID"
          :mapConfig="mapConfig"
        ></MapBox>
      </div>
    </div>
    <div class="content-bottom"><fpqkList></fpqkList></div>
  </div>
</template>
    
<script>
import Title from "@/components/title";
import MapBox from "@/components/map";
import fpqkList from "./fpqk_list.vue";
export default {
  name: "fplxqk",
  components: {
    Title,
    MapBox,
    fpqkList,
  },
  data() {
    return {
      prevDate: null,
      tabList: [
        { id: 0, name: "开具" },
        { id: 1, name: "取得" },
      ], //tab页数据
      selectedIndex: 0, //当前被选中的tab页索引
      resData: [], //查询回来的原始数据
      EchartData: [], // 图表数据

      mapConfig: {},
      chartID: "11100000000",
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.changeTab(0);

    this.ajax({
      url: "/dpzsJccxService/skajstjQuery",
      method: "post",
      data: {
        param: {
          tjny: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = res.data;
      // console.log(this.mapConfig);
      this.mapConfig = this.initEchart();
    });
  },
  methods: {
    //切换tab页,同时切换数据
    changeTab(index) {
      this.EchartData = [];
      this.selectedIndex = index;
      let data = [];

      // this.resData[this.selectedIndex].forEach((item, index) => {
      //   data.push({
      //     xData: item.name,
      //     bqData: item.bq,
      //     tqData: item.tq,
      //   });
      // });

      // this.$nextTick(() => {
      //   this.EchartData = data;
      // });
    },

    initEchart() {
      let allObj = null;
      let allArr = null;
      let max = null;
      let min = null;
      let yanshan = null;
      let jingkai = null;

      let currentData = this.EchartData.cbseList;
      yanshan = currentData.filter((item) => {
        return item.zgswjgbm == "11101910000";
      });
      jingkai = currentData.filter((item) => {
        return item.zgswjgbm == "11101920000";
      });
      allObj = currentData.map((item) => {
        return {
          name: item.zgswjgbm,
          value: item.zje,
          ...item,
        };
      });
      allArr = currentData.map((item) => {
        return item.zje;
      });

      min = Math.min(...allArr);
      max = Math.max(...allArr);

      let option = {
        visualMap: {
          min: min,
          max: max,
          left: 200,
          bottom: 0,
          // text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          textStyle: {
            color: "#ffffff",
          },
          //不同的地图模块，指定展示不同的颜色
          inRange: {
            color: [
              "#ff3e0a",
              "#ff790c",
              "#ff960c",
              "#ffc324",
              "#ffed24",
              "#08387e",
            ],
          },
        },
        geo: [
          {
            map: this.chartID,
            zlevel: -1,
            aspectScale: 1,
            layoutCenter: ["66%", "54%"],
            layoutSize: "100%",
            itemStyle: {
              normal: {
                areaColor: "#ffffff",
                borderColor: "#ffffff",
                borderWidth: 5,
              },
            },
          },
          {
            map: this.chartID,
            zlevel: -2,
            aspectScale: 1,
            layoutCenter: ["66%", "55%"],
            layoutSize: "100%",
            itemStyle: {
              normal: {
                areaColor: "#0b2152",
                borderColor: "#0b2152",
                borderWidth: 8,
              },
            },
          },
          {
            map: this.chartID,
            zlevel: -3,
            aspectScale: 1,
            layoutCenter: ["66%", "55.3%"],
            layoutSize: "100%",
            itemStyle: {
              normal: {
                areaColor: "#0a35a0",
                borderColor: "#0a35a0",
                borderWidth: 8,
              },
            },
          },
          {
            map: this.chartID,
            zlevel: -4,
            aspectScale: 1,
            layoutCenter: ["66%", "56.5%"],
            layoutSize: "100%",
            itemStyle: {
              normal: {
                areaColor: "#0b2152",
                borderColor: "#0b2152",
                borderWidth: 8,
              },
            },
          },
          {
            map: this.chartID,
            zlevel: -5,
            aspectScale: 1,
            layoutCenter: ["66%", "56.8%"],
            layoutSize: "100%",
            itemStyle: {
              normal: {
                areaColor: "#0a35a0",
                borderColor: "#0a35a0",
                borderWidth: 8,
              },
            },
          },
          {
            map: this.chartID,
            zlevel: -6,
            aspectScale: 1,
            layoutCenter: ["66%", "57.3%"],
            layoutSize: "100%",
            itemStyle: {
              normal: {
                areaColor: "#0b2152",
                borderColor: "#0b2152",
                borderWidth: 8,
              },
            },
          },
        ],
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(50,50,50,0)",
          formatter: (item) => {
            if (!item.data || !item.data.zgswjgmc) {
              return "";
            }
            if (this.select == 0) {
              return (
                `<div class="tooltip-box">` +
                `<div class="title">${item.data.zgswjgjc}</div>` +
                `<div class="item"><span>税款</span><span class="money">${item.data.skje}万元</span></div>` +
                `<div class="item"><span>滞纳金</span><span class="money">${item.data.znjje}万元</span></div>` +
                `<div class="item"><span>罚款</span><span class="money">${item.data.fkje}万元</span></div>` +
                `<div class="all"><span>总额</span><span class="money">${item.data.zje}万元</span></div>` +
                `</div>`
              );
            } else {
              return (
                `<div class="tooltip-box">` +
                `<div class="title">${item.data.zgswjgjc}</div>` +
                `<div class="item"><span>检查数量</span><span class="money">${item.data.jcsl}件</span></div>` +
                `<div class="item"><span>审理数量</span><span class="money">${item.data.slsl}件</span></div>` +
                `<div class="item"><span>执行数量</span><span class="money">${item.data.zxsl}件</span></div>` +
                `<div class="item"><span>结案数量</span><span class="money">${item.data.jasl}件</span></div>` +
                `<div class="all"><span>总数量</span><span class="money">${item.data.zsl}件</span></div>` +
                `</div>`
              );
            }
          },
        },
        series: [
          {
            type: "map",
            mapType: this.chartID,
            aspectScale: 1,
            layoutCenter: ["66%", "54%"], //地图位置
            layoutSize: "100%",
            zoom: 1, //当前视角的缩放比例
            // roam: true, //是否开启平游或缩放
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1,
              max: 2,
            },
            label: {
              show: true,
              color: "#FFFFFF",
              fontSize: 14,
              formatter: (item) => {
                return item.data.zgswjgmc;
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#2762e4",
                borderColor: "#2762e4",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#083a9d", // 鼠标悬浮颜色
                label: {
                  show: false,
                  color: "#fff",
                },
              },
            },
            data: allObj,
          },
        ],
      };
      return { option };
    },
  },
};
</script>
    
<style lang="scss" scoped >
.echarts-outer-wrapper {
  position: relative;
  width: 936px;
  height: calc(1080px - 62px - 28px - 20px);
}
.content-top {
  width: 100%;
  height: calc((100% - 54px) / 2);
}
.echart-tab-wrapper {
  height: 60px;
  display: flex;
  align-items: center;
  .tabs {
    display: flex;
    height: 32px;
    line-height: 32px;
    background: linear-gradient(
      180deg,
      rgba(180, 193, 255, 0.48) 0%,
      rgba(41, 50, 93, 0) 100%
    );
    border-radius: 20px;
    overflow: hidden;
    .tab-item {
      width: 80px;
      flex: 0 0 80px;
      text-align: center;
      color: #ffffff;
      font-size: 17px;
      cursor: pointer;
    }
    .select {
      background: linear-gradient(
        180deg,
        rgba(180, 193, 255, 0.48) 0%,
        rgba(41, 50, 93, 0) 100%
      );
      border-radius: 20px;
    }
  }
}
.echart-tab-wrapper {
  float: right;
  // margin-right: 100px;
  .tabs {
    .tab-item {
      width: 150px;
      flex: 0 0 150px;
    }
  }
}

.echart-content-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  .echart-content-box {
    position: absolute;
    width: 300px;
    height: 230px;
    top: 35px;
    left: 49px;
    .item {
      width: 100%;
      height: 50%;
      background: url("~@/assets/images/bg-11.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 50px;
      > p {
        color: #ffffff;
        font-size: 20px;
        font-weight: 400;
        margin-left: 50px;
        .value {
          color: #fc9d4a;
          font-size: 26px;
          font-weight: 600;
        }
        .unit {
          font-size: 16px;
          margin-left: 5px;
        }
      }
    }
  }
  .echart {
    height: 100%;
  }
}

.content-bottom {
  width: 100%;
  height: calc((100% - 54px) / 2);
}
</style>
    